<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
</head>
<script src="js/jquery-3.7.1.js"></script>
<body>
    <h1 align="center">登录</h1>
    <table align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right">用户名：</td>
            <td><input type="text" id="userName"></td>
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td><input type="password" id="pwd"></td>
        </tr>
    </table>
    <div style="margin: auto;text-align: center">
        <p style="text-align: right;width: 300px;margin:5px auto">没有账号?<a href="regiter.html">注册</a>一个</p>
        <button id="login">登录</button>
        <div id="error"></div>
    </div>
</body>
<script>
    $("#login").click(function(){
        $.ajax("login.do",{
            type:"post"
            ,data:{
                userName:$("#userName").val(),
                pwd:$("#pwd").val()
            }
            ,success:function(data){
                if(data == "Yes"){
                    localStorage.setItem("userName",$(userName).val());
                    location.href = 'index.html';
                }else{
                    $("#error").text(data).css("color","red");
                }
            }
            //, error:
        });
    });
</script>
</html>